<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.css">
    <script src="./lib/jquery.js"></script>
</head>

<body>
    <input type="file" name="" id="file1">
    <button id="upLoad">上传文件</button>
    <div class="progress" style="width: 400px; margin: auto;">
        <div id="progress" class="progress-bar progress-bar-striped active" style="width: 0%">
            0% Complete
        </div>
    </div>
    <img src="" alt="" id="img" width="500"> .


    <script>
        //获取文件上传按钮
        var btnUpload = document.querySelector('#upLoad');
        //获取用户选择的文件列表
        var file1 = document.querySelector('#file1');
        //为按钮绑定单击事件处理函数
        btnUpload.addEventListener('click', function() {
            if (file1.length <= 0) {
                return alert('请选择要上传的文件！');
            }
            var fd = new FormData();
            //将用户选择的文件，添加到 FormData 中
            fd.append('tupian', file1.files[0]);

            //创建一个 XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();

            xhr.upload.onprogress = function(e) {
                //判断当前上传资源是否有可以计算的进度
                if (e.lengthComputable) {
                    //e.lengthComputable为true，说明当前上传资源的大小可以被计算

                    //计算上传进度
                    var percent = Math.round((e.loaded / e.total) * 100);
                    //Math.round() 方法向上舍入为最接近的整数
                    //更新上传进度
                    document.querySelector('#progress').style.width = percent + '%';
                    document.querySelector('#progress').innerHTML = percent + '% Complete';

                    console.log(percent);
                } else {
                    console.log('无法计算上传进度');
                }
            };


            //调用 open() 方法，打开一个与服务器的连接
            xhr.open('post', 'http://www.liulongbin.top:3006/api/upload/avatar');

            //调用 send() 方法，将 FormData 对象发送到服务器
            xhr.send(fd);
            //监听xhr.upload.onprogress事件


            //监听onreadystatechange事件
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var res = JSON.parse(xhr.responseText);
                    console.log(res);
                    if (res.status == 200) {
                        alert('上传成功！');
                        $('#img').attr('src', 'http://www.liulongbin.top:3006' + res.url);
                    } else {
                        alert('上传失败！');
                    }
                }
            }

        })
    </script>
</body>

</html>